<!--
 * @Author: jyq
 * @Date: 2022-07-01 10:01:46
 * @LastEditTime: 2022-07-05 09:40:34
 * @LastEditors: jyq
 * @Description: 
 * @FilePath: \dasantest2\day06\vue3-project\src\views\AboutView.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
  <div class="about">
      <van-nav-bar class="myNavBar" title="分类" left-text="返回" left-arrow>
      <template #right>
      <van-icon class="myIcon" name="search" />
      </template>
      </van-nav-bar>
      <div class="sortMain">
        <div class="left">
      <van-sidebar class="mySidebar"  name="search" v-model="active" @change="onChange">
      <van-sidebar-item v-for="(item,index) in mySiderDate" :title=item ></van-sidebar-item>
      </van-sidebar>
        </div>
      <div class="right">
        <van-swipe class="mySwipe" :autoplay="3000" lazy-render>
        <van-swipe-item>
        <van-image
        width="280px"
        height="100px"
        src='https://res.youpin.mi-img.com/youpinoper/accb3d8b_9c95_4635_b176_ac9657bd05cb.jpeg@base@tag=imgScale&h=320&w=750'
        />
        </van-swipe-item>
         <van-swipe-item>
        <van-image
        width="280px"
        height="100px"
        src='https://res.youpin.mi-img.com/youpinoper/8f6eabc4_ff0c_4c44_b3c6_20edd700ace5.jpeg@base@tag=imgScale&h=320&w=750'/>
        </van-swipe-item>
        <van-swipe-item>
        <van-image
        width="280px"
        height="100px"
        src='https://res.youpin.mi-img.com/youpinoper/8b6d166c_bbaa_47f6_b7a3_ec900a7f37f9.jpeg@base@tag=imgScale&h=320&w=750'
        />
        </van-swipe-item>
        </van-swipe>
       <div class="myGrid" v-for="(item,index) in myGridData" :key="index" >
        <div class="title">{{item.title}}</div>
        <van-grid :column-num="3">
        <van-grid-item @click="toTypePage(index)" v-for="(i,index) in item.items" :key="index" icon="photo-o" >
         <van-image
        class="img"
        :src=i.img
        />
        <div class='name'>{{i.name}}</div>
        </van-grid-item>
        </van-grid>
       </div>
      </div>
      </div>
  </div>
</template>

<script setup>
import {ref,onMounted } from "vue";
import { Toast } from "vant";
import {useRouter} from "vue-router";
const router = useRouter()
const active = ref(0);
const mySiderDate = [
  "优品推荐",
  "手机数码",
  "小米电视",
  "影音娱乐",
  "智能家庭",
  "大家电",
  "厨卫电器",
  "生活家电",
  "个护电器",
  "美食酒饮",
  "家居家装",
  "电脑办公",
  "出行车品",
  "服装配饰"  
]
const myGridData0=[
   {
    title: "精选分类",
    items: [
      {
        img: "https://img.youpin.mi-img.com/shopmain/96876f6521dfee4a6d2b7f7428c71f86.png@base@tag=imgScale&h=132&m=1&q=80&w=132",
        name: "笔记本电脑",
      },
      {
        img: "https://img.youpin.mi-img.com/ink/dc4892d4_81f2_4d16_ae9f_fd1d31ebff9f.png?w=228&h=228",
        name: "小米空调",
      },
    ],
  },
  {
    title: "精选专区",
    items: [
      {
        img: "https://img.youpin.mi-img.com/ink/e086b69c_908e_489e_9396_c8c5db0d1f66.png?w=228&h=228",
        name: "小米冰箱",
      },
      {
        img: "https://img.youpin.mi-img.com/ink/7c1ce642_16ee_43a2_a95d_c33568dda752.png?w=228&h=228",
        name: "小米洗衣机",
      },
      {
        img: "https://img.youpin.mi-img.com/ink/75652be9_196b_4236_a5d7_5307981c9e61.png?w=228&h=228",
        name: "小米大家电",
      },
      {
        img: "https://img.youpin.mi-img.com/ink/e4381171_1873_4a7d_9877_5ed1ba8873c0.png?w=228&h=228",
        name: "云米精选",
      },
      {
        img: "https://img.youpin.mi-img.com/ink/e045e16e_0feb_4a86_8cad_45b04f96a15d.png?w=228&h=228",
        name: "颜值电器",
      },
    ],
  },
];
// eslint-disable-next-line no-unused-vars
const myGridData1 = [
  {
    title: "新品发布",
    items: [
      {
        img: "https://img.youpin.mi-img.com/shopmain/96876f6521dfee4a6d2b7f7428c71f86.png@base@tag=imgScale&h=132&m=1&q=80&w=132",
        name: "笔记本电脑",
      },
      {
        img: "https://img.youpin.mi-img.com/ink/dc4892d4_81f2_4d16_ae9f_fd1d31ebff9f.png?w=228&h=228",
        name: "小米空调",
      },
    ],
  },
  {
    title: "小米",
    items: [
      {
        img: "https://img.youpin.mi-img.com/ink/e4381171_1873_4a7d_9877_5ed1ba8873c0.png?w=228&h=228",
        name: "云米精选",
      },
      {
        img: "https://img.youpin.mi-img.com/ink/e045e16e_0feb_4a86_8cad_45b04f96a15d.png?w=228&h=228",
        name: "颜值电器",
      },
    ],
  },
];
let myGridData = ref(myGridData0);
let typePageTitle =ref(mySiderDate[0])
const onChange = (index) => {

  typePageTitle.value = mySiderDate[index]
  try {
    myGridData.value = eval("myGridData" + index);
  } catch (error) {
    myGridData.value = [];
  }
};
const toTypePage = (index)=>{
  sessionStorage.setItem('type',JSON.stringify({title:typePageTitle.value}))
 router.push({name:'type',params:{title:typePageTitle.value}})
}

</script>

<style lang="less" scoped>
.myNavBar{
  position: fixed;
  width: 100%;
  .myIcon{
    font-size: 10px;
    color: #333333;
  }
}
.sortMain{
  display: flex; 
  .left,.right{
     margin-top: 40px;
  }
  .left{
    flex:none;
  } 
  .right{
    flex:auto;
    background-color: rgb(246,246,246);
    .mySwipe{
      width: 270px;
      height: 100px;
      border-radius: 8px;
    }
    .myGrid{
      width:280px;
      align-items: center;
      background-color: white;
      justify-content: center;
      border: radius 8px;
      margin:10px,10px,10px,10px;
      .title{
        font-size: 14px;
        font-weight: bold;
        color: rgb(51, 51, 51);
        padding-left:7px;
        padding-top:10px;
        text-align: left;
      }
      .img{
        width:66px;
    
      }
      .name{
         color: rgb(119, 119, 119);
        font-size: 12px;
        padding-top: 6px;
        text-align: center;
        vertical-align: middle;
        width: 76px;
      }
    }
  }   
}
</style>

<style lang="less">
:root{
  --van-sidebar-width:95px;
  --van-sidebar-font-size:14px;
  --van-sidebar-text-color:#777;
  --van-sidebar-background-color:#fff;
  --van-sidebar-selected-border-color:none;
  --van-grid-item-content-padding:10px,5px;
  --van-sidebar-padding:20px 1px;
  .van-sidebar-item--select{
   .van-sidebar-item__text{
    border-radius: 13px;
    background-color: rgb(230,170,92);
    height: 26.5px;
    line-height: 26.5px;
    color: #fff;
    padding-left: 4px;
  }
  }
}
:root{
   .van-sidebar-item__text
  {
    width: 65px;
    margin-left: 16px;
  }
}
</style>